<template>
    <div>
        <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="() => { $router.push('/') }" />
        <form action="/">
            <van-search v-model="qsearchApival" show-action placeholder="请输入搜索关键词" @search="onSearch"
                @cancel="onCancel" />
        </form>
        <div v-for="item in qsearchApiData" v-show="!histroyt">
            <van-cell-group>
                <van-cell :title="item.goods_name" />

            </van-cell-group>
        </div>
        <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
            description="描述文字" v-show="khis" />
        <div class="histroy" v-show="histroyt">
            <div class="hot">
                <h4>热门搜索</h4>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>电视机</van-tag>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>液晶电视</van-tag>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>液晶屏幕</van-tag>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>智能手机</van-tag>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>苹果手机</van-tag>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>华为手机</van-tag>
            </div>
            <div class="his">
                <h4>历史搜索</h4>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>手机电池</van-tag>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>MP3</van-tag>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>摄影机</van-tag>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>液晶电视</van-tag>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>录音笔</van-tag>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>电脑桌</van-tag>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>衣柜</van-tag>
                <van-tag type="primary" size="large" color="#000" text-color="#000" plain>双人床</van-tag>

            </div>
        </div>

    </div>
</template>

<script setup>
import { qsearchApi } from '@/api/api'
import { ref, watch } from 'vue';
const qsearchApiData = ref([])
const qsearchApival = ref('')
const histroyt = ref(true)
const khis = ref(false)
import _ from 'lodash'
watch(qsearchApival, _.debounce((val) => {
    if (val.length == 0) {
        histroyt.value = true
        khis.value = false
    } else {
        histroyt.value = false
        qsearchApi(val).then(res => {
            console.log(res);
            qsearchApiData.value = res.data.message
            if (res.data.message.length == 0) {
                khis.value = true
            } else {
                khis.value = false
            }
        })
    }

}, 2000))

</script>

<style lang="scss" scoped>
.histroy {
    .hot {
        padding: 20px;

        .van-tag {
            margin: 5px;
            padding: 10px 10px;
        }
    }

    .his {
        padding: 20px;

        .van-tag {
            margin: 5px;
            padding: 10px 10px;
        }
    }
}
</style>